<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="mobile-agent" content="format=html5;url=http://m."/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0">
    <meta charset="UTF-8">
    <title>[[#{meeting.invitation}]]</title>
    <link rel="shortcut icon" type="image/png" th:href="@{/img/favicon.ico}" />
    <link rel="stylesheet" th:href="@{/css/app.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/tpv/style.css(t=${version})}">
	<!-- add version by zhongxiang.huang 2018.12.29 -->
    <link rel="stylesheet" th:href="@{/css/tpv/meeting.css(t=${version})}">
    <!-- animate -->
    <link rel="stylesheet" th:href="@{/css/animate/animate.min.css}" type="text/css">
    
    <script data-th-inline="javascript">
        var LANGUAGE_CODE = [[#{language}]];
    </script>
     
    <script th:src="@{/js/tether/tether.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/jquery.i18n/jquery.i18n.properties.js}"></script>
    <script th:src="@{/js/jquery.i18n/languages.config.js}"></script>
    <script th:src="@{/js/bootstrap/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrap-notify/bootstrap-notify.min.js}"></script>
    <script th:src="@{/js/common.js(t=${version})}"></script>
</head>
<body>
<div class="tpv-modal" >
    <div ><!-- class="tpv-modal-dialog-lg" -->
		<div class="modal-content">
			<div style="background: #337ab7; padding: 10px 30px;text-align: center;">
				<h3 style="color: #fff; font-size: 24px;" >[[#{meeting.invitation}]]</h3><!-- '会议邀请: '+${detail.topic} -->
			</div>
			<div class="modal-body" >
                <div class="row">
                 	<div class="col-lg-12" style="height:100px;text-align:center;margin: 10px">
			            <img style="height:100px" src="/img/tpv/login/login_tpv_logo.png"/>
			        </div>
			        <div class="col-lg-12 tpv-span-font" style="text-align:center;font-size:24px; margin: 10px">
			            <span>[[#{meeting.detail}]]</span>
			        </div>
			        <div class="col-lg-12" >
			        	<div class="modal-title pull-left" style="font-size:24px;background: #337ab7;color: white;padding-left:10px;padding-right:10px; margin-bottom: 10px;margin-top: 0px;margin-left: -20px;">
			                 <span >[[#{meeting.info}]]</span>
			            </div>
			            <div class="input-group row tpv-span-font">
			                <span >[[#{meeting.sponsor}]]：</span>
			                <span data-th-text="${detail.username}" class="tpv-single-line-mobile"></span>
			            </div>
			            <div class="input-group row tpv-span-font">
			                <span >[[#{meeting.topic}]]：</span>
			                <span data-th-text="${detail.topic}" class="tpv-single-line-mobile"></span>
			            </div>
			            <div class="input-group row tpv-span-font">
			                <span >[[#{meeting.time}]]：</span>
			                <span id="invite-meeting-time" data-th-start="${detail.start}" data-th-end="${detail.end}"></span>
			            </div>
			            <div class="input-group row tpv-span-font">
			                <span >[[#{meeting.content}]]：</span>
			                <span id="meeting-content" data-th-text="${detail.content}" class="tpv-multi-line-mobile"></span><!-- data-th-text="${detail.content}" -->
			            </div>
			        </div>
			    </div>
			    <div class="row">
			        <div class="col-lg-12" >
			        	<div class="modal-title pull-left" style="font-size:24px;background: #337ab7;color: white;padding-left:10px;padding-right:10px;margin-bottom: 10px;margin-top: 0px;margin-left: -20px;">
			               	<span >[[#{meeting.join.info}]]</span>
			           	</div>
			           	<div class="input-group row tpv-span-font">
			               	<span >[[#{meeting.id}]]：</span>
			               	<span data-th-text="${detail.meetingId}"></span>
			           	</div>
			          	<div class="input-group row tpv-span-font">
			               	<span >[[#{meeting.password}]]：</span>
			              	<span data-th-text="${detail.password}"></span>
			         	</div>
				        <div class="input-group row tpv-span-font">
				            <span >[[#{meeting.link}]]：</span>
				            <a id="a-meeting-link" style="color: #337ab7" data-th-text="${detail.url}" target="view_window"></a>
				        </div>
				        <div class="input-group row tpv-span-font">
				            <span >[[#{meeting.qrcode}]]：</span>
				            <img id="meeting-detail-qrcode" style="width: 168px;height: 168px" data-th-src="@{'data:img/png;base64,'+${detail.qrcode}}"/>
				        </div>
			        </div>
		        </div>
		        <div style="text-align: center;padding-top: 20px;padding-bottom: 20px">
		                <a target="_blank" data-th-href="${detail.url}" class="btn tpv-btn-primary btn-lg" style="width: 188px; height: 42px;" data-th-title="#{meeting.join}" data-th-text="#{meeting.join}"></a>
		            </div>
			</div>
		</div>
	</div>
				
    <!-- <div class="container">
        <div class="row">
            <div class="col-lg-12" style="height:50px;text-align:center;">
                <img style="height:50px" src="/img/tpv/login/login_tpv_logo.png"/>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12" style="text-align:center;">
                <h3 class="modal-title pull-left" style="background-color:blue;color:white">会议信息</h3>
                <div class="input-group row">
                    <span class="input-group-addon">会议主题：</span>
                    <span data-th-text="${detail.topic}"></span>
                </div>
                <div class="input-group row">
                    <span class="input-group-addon">会议时间：</span>
                    <span data-th-text="${detail.meetingTime}"></span>
                </div>
                <div class="input-group row">
                    <span class="input-group-addon">会议内容：</span>
                    <span data-th-text="${detail.content}"></span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12" style="text-align:center;">
                <h3 class="modal-title pull-left" style="background-color:blue;color:white">入会信息</span></h3>
                <div class="input-group row">
                    <span class="input-group-addon"> 会议ID：</span>
                    <span data-th-text="${detail.meetingId}"></span>
                </div>
                <div class="input-group row">
                    <span class="input-group-addon"> 会议密码：</span>
                    <span data-th-text="${detail.password}"></span>
                </div>
                <div class="input-group row">
                    <span class="input-group-addon"> 会议链接：</span>
                    <span data-th-text="${detail.url}"></span>
                </div>
                <div class="input-group row">
                    <span class="input-group-addon">二维码：</span>
                    <img id="meeting-detail-qrcode" data-th-src="@{'data:img/png;base64,'+${detail.qrcode}}"/>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12" style="height:100px;text-align:center;">
                <a target="_blank" data-th-href="${detail.url}" class="btn btn-primary btn-lg" data-th-title="#{meeting.join}"
                   data-th-text="#{meeting.join}"></a>
            </div>
        </div>
    </div> -->
</div>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		var content = $("#meeting-content");
         var meetingContent = content.text();
         var re = new RegExp("\n", "g");
         content.empty();
         content.html(meetingContent.replace(re, "<br/>")).show(); 
         
         var meetingTime = $("#invite-meeting-time");
         meetingTime.empty();
         meetingTime.append($MB.formatDate(parseInt(meetingTime.attr('start')), parseInt(meetingTime.attr('end'))));
         
         var meetingLink = $("#a-meeting-link");
         meetingLink.attr('href', meetingLink.text());
	});
</script> 
</html>